<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="我的消息" />
      <view class="message-page">
        <!-- 顶部Tabs -->
        <view class="tabs">
          <view v-for="(tab, idx) in tabs" :key="tab" :class="['tab', { active: activeTab === idx }]"
            @tap="switchTab(idx)">
            {{ tab }}
          </view>
        </view>

        <!-- 消息列表 -->
        <view class="message-list">
          <view v-for="(item, idx) in filteredList" :key="idx" class="message-card">
            <image class="icon" :src="imgUrl + 'bell.png'" mode="aspectFit" />
            <view class="content">
              <view class="title">
                <text v-if="item.title">{{ item.title }}</text>
                <text v-if="item.content">：</text>
                <text v-if="item.content">{{ item.content }}</text>
              </view>
              <view class="time" v-if="item.createtime">通知时间：{{ item.createtime }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- <movable-area class="movable-area">
      <movable-view class="fab-container" direction="all" :x="x" :y="y" @tap="getNewsCustomer">
        <image :src="imgUrl + 'customerService2.png'" class="fab-icon" />
      </movable-view>
    </movable-area> -->
  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { useRequest } from '@/api';
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const { API_NOTICE_INDEX_POST } = useRequest()
  onMounted(() => {

  });
  onShow(() => {
    getMessageList();//获取我的消息列表
  })
  const tabs = ['系统', '通知']
  const activeTab = ref(0)
  const switchTab = (idx) => {
    activeTab.value = idx;
    getMessageList();
  }
  const messages = ref([])
  const filteredList = ref([])
  // 获取我的消息列表
  const getMessageList = async () => {
    let params = {
      page: 1,
      page_size: 10
    }
    messages.value = [];
    console.log('activeTab', activeTab.value);
    if(activeTab.value === 0){
      params.type = 'system';
    }else{
      params.type = 'person';
    }
    console.log('params', params);
    
    try {

      const res = await API_NOTICE_INDEX_POST(params)
      console.log('getMessageList', res)

      if (res.code === 1) {
        if (res.data.data.length > 0) {
          messages.value = res.data.data;
        } else {
          messages.value = [];
        }
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
      console.log('messages>>>>>>', messages.value);
      filteredList.value = messages.value;
      
    } catch (error) {
      console.log('error', error);
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }

</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>